<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link th:href="@{/ajax/libs/jquery-layout/jquery.layout-latest.css}" rel="stylesheet"/>
<link th:href="@{/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/>
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
<link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
<link th:href="@{/js/plugins/layer/layui-v2.4.5/layui/css/layui.css}" rel="stylesheet"/>

<body class="gray-bg">
    <div class="row">
        <div class="col-sm-3">
            <div class="form-group">
                <div class="input-group date">
                    <input type="text" class="form-control" id="laydate-demo-3" placeholder="请输入RDS">
                </div>
            </div>
        </div>
        <div class="col-sm-9">
            <div class="col-md-3">
                <div class="ui-layout-content">
                   <div id="tree" class="ztree treeselect"></div>
                </div>
            </div>
        </div>
    </div>
    <div th:include="include :: footer"></div>
    <script th:src="@{/ajax/libs/jquery-layout/jquery.layout-latest.js}"></script>
    <script th:src="@{/js/plugins/layer/laydate/laydate.js}"></script>
    <script th:src="@{/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script>
    <script>
        $(function(){
           function zTreeOnCheck(event, treeId, treeNode) {
              var treeObj = $.fn.zTree.getZTreeObj("tree");
              var nodes = treeObj.getCheckedNodes(true);
              console.log(nodes)
           }
           var options = {
              url: "/broad/areaGrouping/treeData",
              check: {
                 enable: true,
                 chkStyle: "checkbox"
              },
              onCheck: zTreeOnCheck
           };
           $.tree.init(options);
        })
    </script>
</body>
</html>